<template>
    <el-row class="hg100 row">
        <el-col>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>劳动实践</el-breadcrumb-item>
                <el-breadcrumb-item>{{kcmc}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col class="box box-pack-between bgf mt10">
            <div class="left box box-pack-start box-align-center">
                <el-image :src="sj.img" class="img"></el-image>
                <div class="name">
                    <h2 class="bold">{{sj.title}}</h2>
                    <!-- <div class="edit mt10" @click="clickEdit(sj)">编辑</div> -->
                </div>
            </div>
            <div class="right box box-tb box-pack-around box-align-end">
                <span class="time">创建时间 {{sj.createDate}}</span>
                <div class="zb">
                    {{sj.type}}
                </div>
            </div>
        </el-col>
        <el-col class="mt20 bgf">
            <el-col class="box box-pack-start box-algin-center">
                <div class="tab cp" :class="{active:i == current}" v-for="(item,i) in tabList" :key="i"
                    @click="changeTab(i)">{{item.title}}</div>
            </el-col>
            <el-col>
                <el-divider></el-divider>
                <el-col class="shi">
                    <el-col v-if="current == 0">
                        <el-col class="item box box-tb box-pack-start padd20">
                            <span class="title" style="width: 72px;">劳动目标</span>
                            <span class="cont">
                                {{sj.ldmb}}
                            </span>
                        </el-col>
                        <el-col class="item box box-tb box-pack-start padd20">
                            <span class="title" style="width: 91px;">场所与工具</span>
                            <span class="cont">
                                {{sj.csygj}}
                            </span>
                        </el-col>
                        <el-col class="item box box-tb box-pack-start padd20">
                            <span class="title" style="width: 127px;">劳动安全与规则</span>
                            <span class="cont">
                                {{sj.aqygz}}
                            </span>
                        </el-col>
                        <el-col class="item box box-tb box-pack-start padd20">
                            <span class="title">组织准备</span>
                            <span class="cont">
                                {{sj.zzzb}}
                            </span>
                        </el-col>
                        <el-col class="item box box-tb box-pack-start padd20">
                            <span class="title">具体流程</span>
                            <span class="cont">
                                {{sj.jtly}}
                            </span>
                        </el-col>
                    </el-col>
                </el-col>
            </el-col>
        </el-col>
    </el-row>
</template>

<script>
    import chaperView from './components/chaper.vue';
    export default {
        components: {
            chaperView,
        },
        data() {
            return {
                sjid: 0,
                sj: {},
                jyzid: this.$store.state.jyzid,
                // kcmc:this.$route.query.kcmc 需要上页传值
                kcmc: '社会劳动课程',
                tabList: [{
                    title: "实践详情"
                }],
                current: 0
            };
        },
        mounted() {
            this.sjid = this.$route.query.id
            this.ldsjInfo();

        },
        methods: {
            ldsjInfo() {
                this.$api.jyz.ldsjInfo({
                    'id': this.sjid
                }).then(res => {
                    if (res.code == '0') {
                        this.sj = res.info;
                        console.log(res);
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            changeTab(i) {
                this.current = i
            },
            clickEdit() {
                this.$router.push({
                    path: "/ldsj_jyzz/bjsj_jyzz"
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    .bgf {
        background-color: #fff;
    }

    .left {
        padding: 10px 0;
        // width: 340px;
        background-color: #fff;

        .img {
            width: 218px;
            height: 120px;
            border-radius: 7px;
        }

        .bold {
            font-size: 18px;
        }

        .name {
            padding-left: 20px;
            // width: 120px;

            .edit {
                width: 76px;
                height: 26px;
                background: #FEF8F2;
                border: 1px solid #FF9B4F;
                border-radius: 13px;
                color: #FF9B4F;
                line-height: 26px;
                cursor: pointer;
            }
        }
    }

    .right {
        padding-right: 20px;

        .time {
            font-size: 14px;
            color: #5F6572;
        }

        .zb {
            width: 137px;
            height: 25px;
            background: #F3F4FB;
            border-radius: 5px 0px 0px 5px;
            color: #7F84E4;
            font-weight: 600;
        }
    }

    .tab {
        margin: 0 20px;
        padding: 20px 0;
        border-bottom: 4px solid #fff;

        //         border-bottom: 4px solid #626BF1;
        &.active {
            border-bottom: 4px solid #626BF1;
        }

        &:hover {}
    }

    .bgf>>>.el-divider--horizontal {
        margin: 0 20px;
        width: auto;
    }

    .row {
        box-sizing: border-box;
    }

    .hg100 {
        height: 100%;
    }

    .shi {
        position: absolute;
        top: 251px;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        overflow-y: auto;
    }

    .item {
        margin: 20px;
        box-sizing: border-box;
        padding: 10px 30px;
        width: 950px;
        min-height: 104px;
        background: #F8F9FC;
        border-radius: 10px;
        text-align: left;

        .title {
            margin-bottom: 10px;
            display: block;
            width: 72px;
            height: 20px;
            line-height: 40px;
            display: block;
            font-weight: 600;
            font-size: 18px;
            text-align: left;
            border-bottom: 10px solid #9BA6FB;

        }

        .cont {
            color: #5F6572;
            font-size: 16px;
        }
    }

    .line>>>.el-timeline-item__wrapper,
    .line>>>.el-card__body {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
</style>
